
<template>
  <div>
    <!-- 查询列表页面 -->
    <div v-show="Cardtype">
      <el-form
        ref="orderquery"
        :model="orderquery"
        size="mini"
        class="orderquery"
      >
        <div style="display: flex; margin: 20px 0 10px 20px">
          <el-form-item
            label="权益名称"
            style="display: flex; margin: 0 30px 0 0"
          >
            <el-input
              size="mini"
              v-model="orderquery.rightdetailName"
            ></el-input>
          </el-form-item>
          <el-form-item label="状态" style="display: flex; margin: 0 30px 0 0">
            <el-radio v-model="orderquery.rightdetailStatus" label="yes"
              >正常</el-radio
            >
            <el-radio v-model="orderquery.rightdetailStatus" label="no"
              >停用</el-radio
            >
          </el-form-item>

          <el-button
            size="mini"
            type="primary"
            @click="immediatelyquery"
            style="width: 100px"
            >查询</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="imediateadd"
            style="width: 100px"
            >添加</el-button
          >
        </div>
      </el-form>
      <el-table
        :data="tableData"
        class="account_table"
        size="small"
        @toggleRowSelection="toggleRowSelection(row, selected)"
        border
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
        style="margin: 40px 0 10px 20px; width: 95%"
      >
        <el-table-column prop="id" label="权益id" align="cneter">
        </el-table-column>
        <el-table-column prop="rightdetailName" label="权益名称">
        </el-table-column>
        <el-table-column prop="rightdetailTitle" label="权益小标题">
        </el-table-column>
        <el-table-column prop="rightdetailIntroduce" label="权益介绍">
        </el-table-column>
        <el-table-column prop="icon" label="图标">
          <template slot-scope="scope">
            <img :src="baseURL + scope.row.icon" width="40" height="40" />
          </template>
        </el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>

        <el-table-column label="状态" width="280">
          <template slot-scope="scope">
            <template v-if="scope.row.rightdetailStatus == 'yes'"
              >启用</template
            >
            <template v-if="scope.row.rightdetailStatus == 'no'"
              >未启用</template
            >
            <template v-if="scope.row.rightdetailStatus == 'noopen'"
              >未开放</template
            >
          </template>
        </el-table-column>
        <el-table-column label="权益类型" width="280">
          <template slot-scope="scope">
            <template v-if="scope.row.rightdetailType == 'coupon'"
              >优惠卷</template
            >
            <template v-if="scope.row.rightdetailType == 'service'"
              >服务卷</template
            >
            <template v-if="scope.row.rightdetailType == 'insurance'"
              >保险</template
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="imediateupp(scope.row)"
              >修改</el-button
            >
            <el-button type="primary" size="mini" @click="delmethod(scope.row)"
              >删除</el-button
            >
            <!-- <el-button type="primary" size="mini" @click="pagehref">维护卡权益</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加--修改和页面 -->
    <el-dialog
      title="卡权益"
      :visible.sync="centerDialogVisible"
      width="56%"
      :close-on-click-modal="false"
      center
    >
      <el-form
        ref="addfrom"
        :rules="rules"
        :model="addfrom"
        size="mini"
        class="orderquery"
      >
        <div style="display: flex">
          <el-form-item
            label="权益名称："
            style="display: flex; margin: 20px 30px 0 20px"
            prop="rightdetailName"
          >
            <el-input size="mini" v-model="addfrom.rightdetailName"> </el-input>
          </el-form-item>
          <el-form-item
            label="权益小标题："
            style="display: flex; margin: 20px 30px 0 20px"
            prop="rightdetailTitle"
          >
            <el-input size="mini" v-model="addfrom.rightdetailTitle"></el-input>
          </el-form-item>
        </div>
        <el-form-item
          label="权益介绍："
          style="display: flex; margin: 20px 30px 0 20px"
          prop="rightdetailIntroduce"
        >
          <el-input
            size="mini"
            style="width: 400px"
            v-model="addfrom.rightdetailIntroduce"
          ></el-input>
        </el-form-item>

        <div style="display: flex">
          <el-form-item
            label="单位："
            style="display: flex; margin: 20px 30px 0 20px"
            prop="unit"
          >
            <el-radio v-model="addfrom.unit" label="次"></el-radio>
            <el-radio v-model="addfrom.unit" label="张"></el-radio>
            <el-radio v-model="addfrom.unit" label="noopen">未开放</el-radio>
          </el-form-item>
          <el-form-item
            label="权益类型："
            style="display: flex; margin: 20px 30px 0 20px"
            prop="rightdetailType"
          >
            <el-radio v-model="addfrom.rightdetailType" label="coupon"
              >优惠卷</el-radio
            >
            <el-radio v-model="addfrom.rightdetailType" label="service"
              >服务卷</el-radio
            >
            <el-radio v-model="addfrom.rightdetailType" label="insurance"
              >保险</el-radio
            >
          </el-form-item>
        </div>
        <div style="display: flex">
          <el-form-item
            label="状态："
            style="display: flex; margin: 20px 30px 0 20px"
            prop="rightdetailStatus"
          >
            <el-radio v-model="addfrom.rightdetailStatus" label="yes"
              >启用</el-radio
            >
            <el-radio v-model="addfrom.rightdetailStatus" label="no"
              >未启用</el-radio
            >
            <el-radio v-model="addfrom.rightdetailStatus" label="noopen"
              >未开放</el-radio
            >
          </el-form-item>
          <el-form-item
            label="优惠卷编号："
            v-if="addfrom.rightdetailType == 'coupon'"
            style="display: flex; margin: 20px 30px 0 20px"
            prop="relatedId"
          >
            <el-select
              v-model="addfrom.relatedId"
              clearableplaceholder="请选择"
            >
              <el-option
                v-for="item in relatedIdList"
                :key="item.id"
                :label="item.couponName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="服务卷编号："
            v-if="addfrom.rightdetailType == 'service'"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-select v-model="addfrom.relatedId" placeholder="请选择">
              <el-option
                v-for="item in serviceList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="保险编号："
            v-if="addfrom.rightdetailType == 'insurance'"
            style="display: flex; margin: 20px 30px 0 20px"
          >
            <el-select v-model="addfrom.relatedId" placeholder="请选择">
              <el-option
                v-for="item in relatedIdList1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item
          label="图标"
          style="display: flex; margin: 20px 30px 0 20px"
        >
          <el-upload
            class="avatar-uploader"
            :show-file-list="false"
            :action="imgHttpUrl"
            :on-success="rightdetailIconSuccess"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :headers="header"
            :data="multipartFile"
          >
            <!-- :before-upload="beforeAvatarUpload" -->
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <div style="margin-left: 35%; margin-top: 50px">
          <el-button size="mini" type="primary" @click="save('addfrom')"
            >保存
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="centerDialogVisible = false"
            >取消
          </el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%" center>
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="delCardRightd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "card.vue",
  data() {
    return {
imgHttpUrl:this.$imgHttpUrl,

      delDialogVisible: false,
      header: {
        token: document.cookie.split("; ")[0].split("=")[1],
      },
      imageUrl: "",
      updateimageUrl: "",
      baseURL: localStorage.getItem("baseUrl"),
      // 图片请求头
      multipartFile: { type: "rightdetaiicon" },

      centerDialogVisible: false, //弹框按钮
      imgmore: "", //图片显隐的地方
      color1: "#409EFF",
      color2: "#8C366E",
      color3: "#73C991",

      Cardtype: true, //判断出现的是哪个div
      relatedIdList: [],
      orderquery: {
        rightdetailName: "",
        rightdetailStatus: "yes",
        pageNo: "1",
        pageSize: "10000",
      },
      addfrom: {
        id: "",
        rightdetailName: "",
        rightdetailTitle: "",
        rightdetailIntroduce: "",
        icon: "",
        unit: "",
        rightdetailStatus: "",
        relatedId: "",
        rightdetailType: "",
        updateimageUrl: "",
      },
      rules: {
        rightdetailName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        rightdetailTitle: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        rightdetailIntroduce: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        unit: [{ required: true, message: "请选择", trigger: "change" }],
        rightdetailStatus: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        rightdetailType: [
          { required: true, message: "请选择", trigger: "change" },
        ],

        relatedId: [{ required: true, message: "请选择", trigger: "change" }],
      },
      radio: 1,
      tableData: [],
      delId: "", //删除id
    };
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件`);
    },
    rightdetailIconSuccess(res, file) {
      this.imageUrl = this.baseURL + res.data[0];
      this.addfrom.updateimageUrl = res.data[0];
      console.log(res, file, this.addfrom.imageUrl);
    },
    toggleRowSelection(item, index) {
      console.log(item, index);
    },
    delmethod(row) {
      // this.$router.push("/flight/maintenance"); //点击维护卡权益按钮 跳转到维护卡权益页面
      this.delId = row.id;
      this.delDialogVisible = !this.delDialogVisible;
    },
    //保存按钮
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addfrom.id == "") {
            this.addfromMethod();
          } else {
            this.editfromMethod();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // 在保存之前判断一些值不能为空的验证
    },
    // 删除确定按别扭
    delCardRightd() {
      this.$axios
        .getdelCardRightdetail({
          id: this.delId,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.immediatelyquery();
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.delDialogVisible = !this.delDialogVisible;
          }
        });
    },
    // 当前显示的颜色值
    activechange() {
      console.log("选中值发生变化了");
    },
    // 当前值
    colorchange(value) {
      console.log(value);
    },
    handleSuccess(file, filelist) {
      console.log(file[0], filelist);
      this.imgmore = file[0]; //将成功之后的文件路径给imgmore 显示出来
    },
    handlePreview(file) {
      console.log(file); //打印点中的值
      this.dialogImageUrl = file.url; //将点中
      this.dialogVisible = true;
      // document.
    },
    handleRemove(file, filelist) {
      console.log(file, filelist);
    },
    // 查询按钮
    immediatelyquery() {
      
      this.$axios
        .getCardRightdetailList({
          rightdetailName: this.orderquery.rightdetailName,
          rightdetailStatus: this.orderquery.rightdetailStatus,
          pageSize: this.orderquery.pageSize,
          pageNo: this.orderquery.pageNo,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.tableData = res.data.records;
          }
        });
    },
    addfromMethod() {
      this.$axios
        .getaddCardRightdetail({
          rightdetailName: this.addfrom.rightdetailName,
          rightdetailTitle: this.addfrom.rightdetailTitle,
          rightdetailIntroduce: this.addfrom.rightdetailIntroduce,
          unit: this.addfrom.unit,
          rightdetailStatus: this.addfrom.rightdetailStatus,
          rightdetailType: this.addfrom.rightdetailType,
          relatedId: this.addfrom.relatedId,
          icon: this.addfrom.updateimageUrl,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.immediatelyquery();
            this.$message({
              message: "成功",
              type: "success",
            });
            this.centerDialogVisible = !this.centerDialogVisible;
          }
        });
    },
    editfromMethod() {
      this.$axios
        .getupdCardRightdetail({
          rightdetailName: this.addfrom.rightdetailName,
          rightdetailTitle: this.addfrom.rightdetailTitle,
          rightdetailIntroduce: this.addfrom.rightdetailIntroduce,
          unit: this.addfrom.unit,
          rightdetailStatus: this.addfrom.rightdetailStatus,
          rightdetailType: this.addfrom.rightdetailType,
          relatedId: this.addfrom.relatedId,
          icon: this.addfrom.updateimageUrl,
          id: this.addfrom.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.immediatelyquery();
            this.$message({
              message: "成功",
              type: "success",
            });
            this.centerDialogVisible = !this.centerDialogVisible;
          }
        });
    },

    //添加按钮
    imediateadd() {
      this.addfrom= {};

      this.addfrom.id = "";
      this.imageUrl = ""
      this.centerDialogVisible = !this.centerDialogVisible;
    },
    // 修改按钮
    imediateupp(row) {
      this.addfrom.id = row.id;
      this.$axios
        .getCardRightdetailInfo({
          id: row.id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.addfrom.rightdetailName = res.data.rightdetailName;
            this.addfrom.rightdetailTitle = res.data.rightdetailTitle;
            this.addfrom.rightdetailIntroduce = res.data.rightdetailIntroduce;
            this.addfrom.unit = res.data.unit;
            this.addfrom.rightdetailStatus = res.data.rightdetailStatus;
            this.addfrom.rightdetailType = res.data.rightdetailType;
            this.addfrom.relatedId = res.data.relatedId;
            this.addfrom.updateimageUrl = res.data.icon;
            this.imageUrl = this.baseURL + res.data.icon;
            //  rightdetailIntroduce:this.addfrom.rightdetailIntroduce,
            //  unit:this.addfrom.unit,
            //  rightdetailStatus:this.addfrom.rightdetailStatus,
            //  rightdetailType:this.addfrom.rightdetailType,
            //  relatedId:this.addfrom.relatedId,
            //  icon:this.addfrom.updateimageUrl,
          }
        });
      this.centerDialogVisible = !this.centerDialogVisible; //将点击事件取反操作
    },

    //添加按钮
    getCouponTypeList() {
      this.$axios
        .getCouponTypeList({
          couponStatus: "yes",
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.relatedIdList = res.data;
          }
        });
    },
  },
  mounted() {
    this.immediatelyquery();
    this.getCouponTypeList();
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>